<template>
  <div class="setAccountName">
    <el-input
    v-model.trim="accountName"
    clearable
    :placeholder="$t('tronExchange.enterAccountName')"
    class="inputName mb"></el-input>
    <div class="el-form-item__error1 mb" v-if="error">{{error}}</div>
    <el-button type="primary" class="setBtn"
    v-loading="loading"
    @click="handleSetAccount">{{$t('cpuNet.comfirm')}}</el-button>
    <p class="mt15 mb5">{{ $t('tronExchange.accountCanChangeOne') }}</p>
    <p>{{ $t('tronExchange.accountNameTip') }}</p>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos/index';
import { validateTronName } from '@/utils/validate';

export default {
  name: 'setAccountName', // 波场设置账户名
  data() {
    return {
      loading: false,
      accountName: '',
      error: false,
    }
  },
  components: {},
  props: {
    setAccountVisible: Boolean
  },
  watch: {
    setAccountVisible: function change(val) {
      if (!val) return;
      this.accountName = '';
      this.error = false;
      this.loading = false;
    }
  },
  computed: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 设置账户名
    handleSetAccount() {
      const params = {
        account: this.accountName,
      }
      if (!validateTronName(params.account)) {
        this.error = this.$t('tronExchange.incorrectFormat');
        return;
      }
      this.error = false;
      this.loading = true;
      EosModel.updateAccount(params, () => {
        this.loading = false;
        this.$emit('lisenSetAccount')
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.setAccountName {
  padding: 0 40px;

  .el-form-item__error1 {
    margin-top: -5px;
    color: #f56c6c;
  }

  .setBtn {
    width: 100%;
  }
}
</style>

